

<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Installation - React</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="og:title" content="Installation - React">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://facebook.github.io/react/docs/installation.html">
  <meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
  <meta property="og:description" content="A JavaScript library for building user interfaces">
  <meta property="fb:app_id" content="623268441017527">

  <link rel="shortcut icon" href="/react/favicon.ico">
  <link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">

  <link rel="stylesheet" href="//cdn.bootcss.com/docsearch.js/1.3.0/docsearch.min.css" />
  <link rel="stylesheet" href="/react/css/syntax.css">
  <link rel="stylesheet" href="/react/css/codemirror.css">
  <link rel="stylesheet" href="/react/css/react.css">

  <script src="//use.typekit.net/vqa1hcx.js"></script>
  <script>try{Typekit.load();}catch(e){}</script>

  <!--[if lte IE 8]>
  <script src="https://unpkg.com/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://unpkg.com/es5-shim@4.5.9/es5-shim.min.js"></script>
  <script src="https://unpkg.com/es5-shim@4.5.9/es5-sham.min.js"></script>
  <![endif]-->

  <script src="//cdn.bootcss.com/docsearch.js/1.5.0/docsearch.min.js"></script>
  <script src="//cdn.bootcss.com/codemirror/5.15.2/codemirror.js"></script>
  <script src="//cdn.bootcss.com/codemirror/5.15.2/mode/javascript/javascript.js"></script>
  <script src="//cdn.bootcss.com/codemirror/5.15.2/mode/xml/xml.js"></script>
  <script src="//cdn.bootcss.com/codemirror/5.15.2/mode/jsx/jsx.js"></script>
  <script src="//cdn.bootcss.com/react/15.5.4/react.min.js"></script>
  <script src="//cdn.bootcss.com/react/15.5.4/react-dom.min.js"></script>
  <script src="//cdn.bootcss.com/babel-standalone/6.15.0/babel.min.js"></script>

  <script src="/react/js/live_editor.js"></script>
</head>
<body>

  <div class="container">

    <div class="nav-main">
  <div class="wrap">
    <a class="nav-home" href="/react/">
      <img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
      React
    </a>
    <div class="nav-lists">
      <ul class="nav-site nav-site-internal">
        <li><a href="/react/docs/hello-world.html" class="active">Docs</a></li>
        <li><a href="/react/tutorial/tutorial.html">Tutorial</a></li>
        <li><a href="/react/community/support.html">Community</a></li>
        <li><a href="/react/blog/">Blog</a></li>
        <li class="nav-site-search">
          <input id="algolia-doc-search" type="text" placeholder="Search docs..." />
        </li>
      </ul>
      <ul class="nav-site nav-site-external">
        <li><a href="https://github.com/facebook/react">GitHub</a></li>
        <li><a href="https://github.com/facebook/react/releases">v15.5.4</a></li>
      </ul>
    </div>
  </div>
</div>


    <section class="content wrap documentationContent">
  <div class="inner-content">
    <a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/docs/installation.md" target="_blank">Edit on GitHub</a>
    <h1>
      Installation
    </h1>
    <div class="subHeader"></div>

    <style>
  .tab-hidden {
    display: none;
  }
</style>

<p>React is flexible and can be used in a variety of projects. You can create new apps with it, but you can also gradually introduce it into an existing codebase without doing a rewrite.</p>

<div class="toggler">
  <style>
    .toggler li {
       display: inline-block;
       position: relative;
       top: 1px;
       padding: 10px;
       margin: 0px 2px 0px 2px;
       border: 1px solid #05A5D1;
       border-bottom-color: transparent;
       border-radius: 3px 3px 0px 0px;
       color: #05A5D1;
       background-color: transparent;
       font-size: 0.99em;
       cursor: pointer;
    }
    .toggler li:first-child {
      margin-left: 0;
    }
    .toggler li:last-child {
      margin-right: 0;
    }
    .toggler ul {
      display: inline-block;
      list-style-type: none;
      margin: 0;
      border-bottom: 1px solid #05A5D1;
      cursor: default;
    }
    @media screen and (max-width: 960px) {
      .toggler li,
      .toggler li:first-child,
      .toggler li:last-child {
        display: block;
        border-bottom-color: #05A5D1;
        border-radius: 3px;
        margin: 2px 0px 2px 0px;
      }
      .toggler ul {
        border-bottom: 0;
      }
    }
    .display-target-fiddle .toggler .button-fiddle:focus,
    .display-target-newapp .toggler .button-newapp:focus,
    .display-target-existingapp .toggler .button-existingapp:focus {
      background-color: #046E8B;
      color: white;
    }
    .display-target-fiddle .toggler .button-fiddle,
    .display-target-newapp .toggler .button-newapp,
    .display-target-existingapp .toggler .button-existingapp {
      background-color: #05A5D1;
      color: white;
    }
    block {
      display: none;
    }
    .display-target-fiddle .fiddle,
    .display-target-newapp .newapp,
    .display-target-existingapp .existingapp {
      display: block;
    }
  </style>
  <script>
    document.querySelector('.toggler').parentElement.className += ' display-target-fiddle';
  </script>
  <span>Which of these options best describes what you want to do?</span>
  <br />
  <br />
   <ul role="tablist" >
      <li id="fiddle" class="button-fiddle" aria-selected="false" role="tab" tabindex="0" aria-controls="fiddletab"
          onclick="display('target', 'fiddle')" onkeyup="keyToggle(event, 'fiddle', 'existingapp', 'newapp')">
        Try React
      </li>
      <li id="newapp" class="button-newapp" aria-selected="false" role="tab" tabindex="-1" aria-controls="newapptab"
          onclick="display('target', 'newapp')" onkeyup="keyToggle(event, 'newapp', 'fiddle', 'existingapp')">
        Create a New App
      </li>
      <li id="existingapp" class="button-existingapp" aria-selected="false" role="tab" tabindex="-1" aria-controls="existingapptab"
          onclick="display('target', 'existingapp')" onkeyup="keyToggle(event, 'existingapp', 'newapp', 'fiddle')">
        Add React to an Existing App
      </li>
    </ul>
</div>

<p><block id="fiddletab" role="tabpanel" class="fiddle"  /></p>

<h2>Trying Out React</h2>

<p>If you&#39;re just interested in playing around with React, you can use CodePen. Try starting from <a href="http://codepen.io/gaearon/pen/rrpgNB?editors=0010">this Hello World example code</a>. You don&#39;t need to install anything; you can just modify the code and see if it works.</p>

<p>If you prefer to use your own text editor, you can also <a href="/react/downloads/single-file-example.html" download="hello.html">download this HTML file</a>, edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so don&#39;t use it in production.</p>

<p>If you want to use it for a full application, there are two popular ways to get started with React: using Create React App, or adding it to an existing application.</p>

<p><block id="newapptab" role="tabpanel" class="newapp" /></p>

<h2>Creating a New Application</h2>

<p><a href="http://github.com/facebookincubator/create-react-app">Create React App</a> is the best way to start building a new React single page application. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.</p>
<div class="highlight"><pre><code class="language-bash" data-lang="bash">npm install -g create-react-app
create-react-app my-app

<span class="nb">cd </span>my-app
npm start
</code></pre></div>
<p>Create React App doesn&#39;t handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. It uses build tools like Babel and webpack under the hood, but works with zero configuration.</p>

<p>When you&#39;re ready to deploy to production, running <code>npm run build</code> will create an optimized build of your app in the <code>build</code> folder. You can learn more about Create React App <a href="https://github.com/facebookincubator/create-react-app#create-react-app-">from its README</a> and the <a href="https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents">User Guide</a>.</p>

<p><block id="existingapptab" role="tabpanel" class="existingapp" /></p>

<h2>Adding React to an Existing Application</h2>

<p>You don&#39;t need to rewrite your app to start using React.</p>

<p>We recommend adding React to a small part of your application, such as an individual widget, so you can see if it works well for your use case.</p>

<p>While React <a href="/react/docs/react-without-es6.html">can be used</a> without a build pipeline, we recommend setting it up so you can be more productive. A modern build pipeline typically consists of:</p>

<ul>
<li>A <strong>package manager</strong>, such as <a href="https://yarnpkg.com/">Yarn</a> or <a href="https://www.npmjs.com/">npm</a>. It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.</li>
<li>A <strong>bundler</strong>, such as <a href="https://webpack.js.org/">webpack</a> or <a href="http://browserify.org/">Browserify</a>. It lets you write modular code and bundle it together into small packages to optimize load time.</li>
<li>A <strong>compiler</strong> such as <a href="http://babeljs.io/">Babel</a>. It lets you write modern JavaScript code that still works in older browsers.</li>
</ul>

<h3>Installing React</h3>

<blockquote>
<p><strong>Note:</strong></p>

<p>Once installed, we strongly recommend setting up a <a href="/react/docs/optimizing-performance.html#use-the-production-build">production build process</a> to ensure you&#39;re using the fast version of React in production.</p>
</blockquote>

<p>We recommend using <a href="https://yarnpkg.com/">Yarn</a> or <a href="https://www.npmjs.com/">npm</a> for managing front-end dependencies. If you&#39;re new to package managers, the <a href="https://yarnpkg.com/en/docs/getting-started">Yarn documentation</a> is a good place to get started.</p>

<p>To install React with Yarn, run:</p>
<div class="highlight"><pre><code class="language-bash" data-lang="bash">yarn init
yarn add react react-dom
</code></pre></div>
<p>To install React with npm, run:</p>
<div class="highlight"><pre><code class="language-bash" data-lang="bash">npm init
npm install --save react react-dom
</code></pre></div>
<p>Both Yarn and npm download packages from the <a href="http://npmjs.com/">npm registry</a>.</p>

<h3>Enabling ES6 and JSX</h3>

<p>We recommend using React with <a href="http://babeljs.io/">Babel</a> to let you use ES6 and JSX in your JavaScript code. ES6 is a set of modern JavaScript features that make development easier, and JSX is an extension to the JavaScript language that works nicely with React.</p>

<p>The <a href="https://babeljs.io/docs/setup/">Babel setup instructions</a> explain how to configure Babel in many different build environments. Make sure you install <a href="http://babeljs.io/docs/plugins/preset-react/#basic-setup-with-the-cli-"><code>babel-preset-react</code></a> and <a href="http://babeljs.io/docs/plugins/preset-es2015/#basic-setup-with-the-cli-"><code>babel-preset-es2015</code></a> and enable them in your <a href="http://babeljs.io/docs/usage/babelrc/"><code>.babelrc</code> configuration</a>, and you&#39;re good to go.</p>

<h3>Hello World with ES6 and JSX</h3>

<p>We recommend using a bundler like <a href="https://webpack.js.org/">webpack</a> or <a href="http://browserify.org/">Browserify</a> so you can write modular code and bundle it together into small packages to optimize load time.</p>

<p>The smallest React example looks like this:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s1">&#39;react&#39;</span><span class="p">;</span>
<span class="kr">import</span> <span class="nx">ReactDOM</span> <span class="nx">from</span> <span class="s1">&#39;react-dom&#39;</span><span class="p">;</span>

<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
  <span class="o">&lt;</span><span class="nx">h1</span><span class="o">&gt;</span><span class="nx">Hello</span><span class="p">,</span> <span class="nx">world</span><span class="o">!&lt;</span><span class="err">/h1&gt;,</span>
  <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;root&#39;</span><span class="p">)</span>
<span class="p">);</span>
</code></pre></div>
<p>This code renders into a DOM element with the id of <code>root</code> so you need <code>&lt;div id=&quot;root&quot;&gt;&lt;/div&gt;</code> somewhere in your HTML file.</p>

<p>Similarly, you can render a React component inside a DOM element somewhere inside your existing app written with any other JavaScript UI library.</p>

<p><a href="/react/docs/integrating-with-other-libraries.html#integrating-with-other-view-libraries">Learn more about integrating React with existing code.</a></p>

<h3>Development and Production Versions</h3>

<p>By default, React includes many helpful warnings. These warnings are very useful in development.</p>

<p><strong>However, they make the development version of React larger and slower so you should use the production version when you deploy the app.</strong></p>

<p>Learn <a href="/react/docs/optimizing-performance.html#use-the-production-build">how to tell if your website is serving the right version of React</a>, and how to configure the production build process most efficiently:</p>

<ul>
<li><a href="/react/docs/optimizing-performance.html#create-react-app">Creating a Production Build with Create React App</a></li>
<li><a href="/react/docs/optimizing-performance.html#single-file-builds">Creating a Production Build with Single-File Builds</a></li>
<li><a href="/react/docs/optimizing-performance.html#brunch">Creating a Production Build with Brunch</a></li>
<li><a href="/react/docs/optimizing-performance.html#browserify">Creating a Production Build with Browserify</a></li>
<li><a href="/react/docs/optimizing-performance.html#rollup">Creating a Production Build with Rollup</a></li>
<li><a href="/react/docs/optimizing-performance.html#webpack">Creating a Production Build with Webpack</a></li>
</ul>

<h3>Using a CDN</h3>

<p>If you don&#39;t want to use npm to manage client packages, the <code>react</code> and <code>react-dom</code> npm packages also provide single-file distributions in <code>dist</code> folders, which are hosted on a CDN:</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;https://unpkg.com/react@15/dist/react.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;https://unpkg.com/react-dom@15/dist/react-dom.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div>
<p>The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available at:</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;https://unpkg.com/react@15/dist/react.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;https://unpkg.com/react-dom@15/dist/react-dom.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div>
<p>To load a specific version of <code>react</code> and <code>react-dom</code>, replace <code>15</code> with the version number.</p>

<p>If you use Bower, React is available via the <code>react</code> package.</p>

<script>
/**
 * The code below is based on a snippet from React Native Getting Started page.
 */

// Convert <div>...<span><block /></span>...</div>
// Into <div>...<block />...</div>
var blocks = document.getElementsByTagName('block');
for (var i = 0; i < blocks.length; ++i) {
  var block = blocks[i];
  var span = blocks[i].parentNode;
  var container = span.parentNode;
  container.insertBefore(block, span);
  container.removeChild(span);
}
// Convert <div>...<block />content<block />...</div>
// Into <div>...<block>content</block><block />...</div>
blocks = document.getElementsByTagName('block');
for (var i = 0; i < blocks.length; ++i) {
  var block = blocks[i];
  while (block.nextSibling && block.nextSibling.tagName !== 'BLOCK') {
    block.appendChild(block.nextSibling);
  }
}

function setSelected(value){
  var tabs = document.querySelectorAll('li[role="tab"]');
  for (var i = 0; i < tabs.length; ++i) {
    var tab = tabs[i];
    if (tab.className === 'button-' + value) {
      tabs[i].setAttribute('aria-selected', 'true');
      tabs[i].setAttribute('tabindex', '0');
    } else {
      tabs[i].setAttribute('aria-selected', 'false');
      tabs[i].setAttribute('tabindex', '-1');
    }
  }
}

function keyToggle(e, value, prevTab, nextTab){
  if (e.keyCode === 37) {
    document.getElementById(prevTab).focus();
    display('target', prevTab);
  }
  if (e.keyCode === 39) {
    document.getElementById(nextTab).focus();
    display('target', nextTab);
  }
}

function display(type, value) {
  setSelected(value);
  var container = document.getElementsByTagName('block')[0].parentNode;
  container.className = 'display-' + type + '-' + value + ' ' +
    container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');
}

// If we are coming to the page with a hash in it (i.e. from a search, for example), try to get
// us as close as possible to the correct platform and dev os using the hashtag and block walk up.
var foundHash = false;
if (window.location.hash !== '' && window.location.hash !== 'content') { // content is default
  // Hash links are added a bit later so we wait for them.
  window.addEventListener('DOMContentLoaded', selectTabForHashLink);
}

function selectTabForHashLink() {
  var hashLinks = document.querySelectorAll('a.hash-link');
  for (var i = 0; i < hashLinks.length && !foundHash; ++i) {
    if (hashLinks[i].hash === window.location.hash) {
      var parent = hashLinks[i].parentElement;
      while (parent) {
        if (parent.tagName === 'BLOCK') {
          var target = null;
          if (parent.className.indexOf('fiddle') > -1) {
            target = 'fiddle';
          } else if (parent.className.indexOf('newapp') > -1) {
            target = 'newapp';
          } else if (parent.className.indexOf('existingapp') > -1) {
            target = 'existingapp';
          } else {
            break; // assume we don't have anything.
          }
          display('target', target);
          foundHash = true;
          break;
        }
        parent = parent.parentElement;
      }
    }
  }
}
</script>


    <div class="docs-prevnext">
      
      
        <a class="docs-next" href="/react/docs/hello-world.html">Next &rarr;</a>
      
    </div>
  </div>

  <div class="nav-docs">
  <!-- Docs Nav -->
  
    <div class="nav-docs-section">
      <h3>Quick Start</h3>
      <ul>
        
          <li>
            <a href="/react/docs/installation.html" class="active">Installation</a>
            
          </li>
        
          <li>
            <a href="/react/docs/hello-world.html">Hello World</a>
            
          </li>
        
          <li>
            <a href="/react/docs/introducing-jsx.html">Introducing JSX</a>
            
          </li>
        
          <li>
            <a href="/react/docs/rendering-elements.html">Rendering Elements</a>
            
          </li>
        
          <li>
            <a href="/react/docs/components-and-props.html">Components and Props</a>
            
          </li>
        
          <li>
            <a href="/react/docs/state-and-lifecycle.html">State and Lifecycle</a>
            
          </li>
        
          <li>
            <a href="/react/docs/handling-events.html">Handling Events</a>
            
          </li>
        
          <li>
            <a href="/react/docs/conditional-rendering.html">Conditional Rendering</a>
            
          </li>
        
          <li>
            <a href="/react/docs/lists-and-keys.html">Lists and Keys</a>
            
          </li>
        
          <li>
            <a href="/react/docs/forms.html">Forms</a>
            
          </li>
        
          <li>
            <a href="/react/docs/lifting-state-up.html">Lifting State Up</a>
            
          </li>
        
          <li>
            <a href="/react/docs/composition-vs-inheritance.html">Composition vs Inheritance</a>
            
          </li>
        
          <li>
            <a href="/react/docs/thinking-in-react.html">Thinking In React</a>
            
          </li>
        
      </ul>
    </div>
  
    <div class="nav-docs-section">
      <h3>Advanced Guides</h3>
      <ul>
        
          <li>
            <a href="/react/docs/jsx-in-depth.html">JSX In Depth</a>
            
          </li>
        
          <li>
            <a href="/react/docs/typechecking-with-proptypes.html">Typechecking With PropTypes</a>
            
          </li>
        
          <li>
            <a href="/react/docs/refs-and-the-dom.html">Refs and the DOM</a>
            
          </li>
        
          <li>
            <a href="/react/docs/uncontrolled-components.html">Uncontrolled Components</a>
            
          </li>
        
          <li>
            <a href="/react/docs/optimizing-performance.html">Optimizing Performance</a>
            
          </li>
        
          <li>
            <a href="/react/docs/react-without-es6.html">React Without ES6</a>
            
          </li>
        
          <li>
            <a href="/react/docs/react-without-jsx.html">React Without JSX</a>
            
          </li>
        
          <li>
            <a href="/react/docs/reconciliation.html">Reconciliation</a>
            
          </li>
        
          <li>
            <a href="/react/docs/context.html">Context</a>
            
          </li>
        
          <li>
            <a href="/react/docs/web-components.html">Web Components</a>
            
          </li>
        
          <li>
            <a href="/react/docs/higher-order-components.html">Higher-Order Components</a>
            
          </li>
        
          <li>
            <a href="/react/docs/integrating-with-other-libraries.html">Integrating with Other Libraries</a>
            
          </li>
        
      </ul>
    </div>
  
    <div class="nav-docs-section">
      <h3>Reference</h3>
      <ul>
        
          <li>
            <a href="/react/docs/react-api.html">React</a>
            
              <ul>
                
                  <li>
                    <a href="/react/docs/react-component.html">React.Component</a>
                  </li>
                
              </ul>
            
          </li>
        
          <li>
            <a href="/react/docs/react-dom.html">ReactDOM</a>
            
          </li>
        
          <li>
            <a href="/react/docs/react-dom-server.html">ReactDOMServer</a>
            
          </li>
        
          <li>
            <a href="/react/docs/dom-elements.html">DOM Elements</a>
            
          </li>
        
          <li>
            <a href="/react/docs/events.html">SyntheticEvent</a>
            
          </li>
        
      </ul>
    </div>
  

  <!-- Contributing Nav -->
  
    <div class="nav-docs-section">
      <h3>Contributing</h3>
      <ul>
        
          <li>
            <a href="/react/contributing/how-to-contribute.html">How to Contribute</a>
          </li>
        
          <li>
            <a href="/react/contributing/codebase-overview.html">Codebase Overview</a>
          </li>
        
          <li>
            <a href="/react/contributing/implementation-notes.html">Implementation Notes</a>
          </li>
        
          <li>
            <a href="/react/contributing/design-principles.html">Design Principles</a>
          </li>
        
      </ul>
    </div>
  

</div>

</section>


    <footer class="nav-footer">
  <section class="sitemap">
    <a href="/react/" class="nav-home">
    </a>
    <div>
      <h5><a href="/react/docs/">Docs</a></h5>
      <a href="/react/docs/hello-world.html">Quick Start</a>
      <a href="/react/docs/thinking-in-react.html">Thinking in React</a>
      <a href="/react/tutorial/tutorial.html">Tutorial</a>
      <a href="/react/docs/jsx-in-depth.html">Advanced Guides</a>
    </div>
    <div>
      <h5><a href="/react/community/support.html">Community</a></h5>
      <a href="http://stackoverflow.com/questions/tagged/reactjs" target="_blank">Stack Overflow</a>
      <a href="https://discuss.reactjs.org/" target="_blank">Discussion Forum</a>
      <a href="https://discord.gg/0ZcbPKXt5bZjGY5n" target="_blank">Reactiflux Chat</a>
      <a href="https://www.facebook.com/react" target="_blank">Facebook</a>
      <a href="https://twitter.com/reactjs" target="_blank">Twitter</a>
    </div>
    <div>
      <h5><a href="/react/community/support.html">Resources</a></h5>
      <a href="/react/community/conferences.html">Conferences</a>
      <a href="/react/community/videos.html">Videos</a>
      <a href="https://github.com/facebook/react/wiki/Examples" target="_blank">Examples</a>
      <a href="https://github.com/facebook/react/wiki/Complementary-Tools" target="_blank">Complementary Tools</a>
    </div>
    <div>
      <h5>More</h5>
      <a href="/react/blog/">Blog</a>
      <a href="https://github.com/facebook/react" target="_blank">GitHub</a>
      <a href="http://facebook.github.io/react-native/" target="_blank">React Native</a>
      <a href="/react/acknowledgements.html">Acknowledgements</a>
    </div>
  </section>
  <a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource">
    <img src="/react/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/>
  </a>
  <section class="copyright">
    Copyright © 2017 Facebook Inc.
  </section>
</footer>

  </div>

  <div id="fb-root"></div>
  <script src="/react/js/anchor-links.js"></script>
  <script>
    

    

    
    docsearch({
      apiKey: '36221914cce388c46d0420343e0bb32e',
      indexName: 'react',
      inputSelector: '#algolia-doc-search'
    });
  </script>
</body>
</html>
